<template>
     <div class="slideshow_box">
         <!-- 图片列表 -->
        <ul class="imgs_list" ref="imgsList" :style="imgsListTranslateX">
            <li v-for="(value, index) in imgsData" :key="index" :style="`left:${100 * index}%`">
               <a :href="value.imgHref" :target="value.hrefTarget">
                   <img 
                    :src="value.imgSrc" 
                    :alt="value.imgAlt" 
                    :title="value.imgTitle"
                   />
               </a>
           </li>
            <li :style="`left:${100 * imgsData.length}%`">
               <a :href="imgsData[0].imgHref" :target="imgsData[0].hrefTarget">
                   <img 
                    :src="imgsData[0].imgSrc" 
                    :alt="imgsData[0].imgAlt" 
                    :title="imgsData[0].imgTitle"
                   />
               </a>
           </li>
        </ul>
        <!-- 切换按钮 -->
        <div class="taggle_btn" ref="taggle">
            <button class="left_taggle_btn" @click="taggleBtn('left')">☚</button>
            <button class="right_taggle_btn" @click="taggleBtn('right')">☛</button>
        </div>
        <!-- 小圆点 -->
        <div class="circle">
            <ul>
                <li 
                 v-for="(value, index) in imgsData" 
                 :key="index"
                 :style="imgsCircle[index]"
                 :data-index="index"
                 @click="changeImg"
                >
                </li>
            </ul>
        </div>
     </div>
</template>

<script>
import {onMounted, ref} from 'vue'
export default {
    name: 'SimpleSlideshow',
    // Props的imgsData参数为父组件传来的图片数据，格式如下：
    /*[{
          imgSrc:'',       //必选参数，它是<img>元素的src属性
          imgAlt:'',       //可选参数，它是<img>元素的alt属性
          imgTitle:'',     //可选参数，它是<img>元素的title属性
          imgHref:'',      //可选参数，它是<a>元素的href属性
          hrefTarget:''    //可选参数，它是<a>元素的target属性
      }]    */
    props:['imgsData'],
    setup() {
        let imgsList = ref(null)
        let taggle = ref(null)
        let autoTimeInterval = ref(3000) //自动轮播时间间隔（ms）
        let cout = ref(0) //显示到第几张图片
        let flag = ref(true) //按钮防抖阀，防止在短时间内多次点击按钮
        let n = ref(0) //n参数值为1表示图片自右向左，-1则反之
        let speed = ref(5) //轮播速度取值范围[1,100]
        let imgsListTranslateXNum = ref(0) //图片初始位移位置
        let imgsCircle = ref([]) //底部小圆点变色样式
        let imgsListTranslateX = ref('transform: translateX(0%);') //图片位移样式

        //自动轮播
        onMounted(()=>{
            setInterval(() => {
                taggleBtn('right')
            }, autoTimeInterval.value);
        })

        //底部小圆点变色
        function imgCircleChangeColor(c) {
            for(let i = 0; i < imgsList.value.children.length; i++) {
                imgsCircle.value[i] = 'background-color: rgb(255, 255, 255);'
            }
            imgsCircle.value[c] = 'background-color: rgb(255, 238, 0);'
        }

        //按钮切换图片动画
        function imgsListMov() {
            while(1){
                if(100 % speed.value === 0) {
                    break
                }
                speed.value++
            }
            if(imgsListTranslateXNum.value === -100 * cout.value) {
                flag.value = true
                return
            }
            imgsListTranslateXNum.value -= speed.value * n
            imgsListTranslateX.value = `transform: translateX(${imgsListTranslateXNum.value}%);`
            requestAnimationFrame(imgsListMov)
            if(cout.value === imgsList.value.children.length - 1) {
                imgCircleChangeColor(0)
            }
        }

        //按钮切换功能
        function taggleBtn(direction) {
            if(direction === 'right' && cout.value < imgsList.value.children.length - 1 && flag.value) {
                n = 1
                cout.value++
                flag.value = !flag.value
                requestAnimationFrame(imgsListMov)
                imgCircleChangeColor(cout.value)
            }else if(direction === 'left' && cout.value > 0 && flag.value) {
                n = -1
                cout.value--
                flag.value = !flag.value
                requestAnimationFrame(imgsListMov)
                imgCircleChangeColor(cout.value)
            }else if(cout.value === imgsList.value.children.length - 1 && flag.value) {
                cout.value = 0
                imgsListTranslateXNum.value = 0
                imgsListTranslateX.value = `transform: translateX(${imgsListTranslateXNum.value}%);`
                n = 1
                cout.value = 1
                flag.value = !flag.value
                requestAnimationFrame(imgsListMov)
                imgCircleChangeColor(cout.value)
            }else if(cout.value === 0 && flag.value) {
                cout.value = imgsList.value.children.length - 1
                imgsListTranslateXNum.value = -100 * cout.value
                imgsListTranslateX.value = `transform: translateX(${imgsListTranslateXNum.value}%);`
                n = -1
                cout.value = cout.value - 1
                flag.value = !flag.value
                requestAnimationFrame(imgsListMov)
                imgCircleChangeColor(cout.value)
            }
        }

        // 底部小圆点切换
        function changeImg(e) {
            if(!flag.value) return
            let circledataIndex = parseInt(e.target.getAttribute('data-index'))
            circledataIndex > cout.value ? n = 1 : n = -1
            cout.value = circledataIndex
            flag.value = !flag.value
            requestAnimationFrame(imgsListMov)
            imgCircleChangeColor(cout.value)
        }

        return {
            imgsList,
            imgsListTranslateX,
            imgsCircle,
            taggleBtn,
            taggle,
            changeImg
        }

    }
}
</script>

<style scoped lang="css">
.slideshow_box {
    position: relative;
    overflow: hidden;
    top: 20px;
    left: 50%;
    margin: 0px;
    padding: 0px;
    width: 800px;
    height: 500px;
    transform: translateX(-50%);
    border: 8px solid rgb(0, 0, 0);
    box-shadow: 0px 0px 85px 35px #000;
    background-color: black;
    box-sizing: border-box;
}
/* 图片部分 */
.slideshow_box .imgs_list {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    list-style: none;
}
.slideshow_box .imgs_list li {
    position: absolute;
    width: 100%;
    height: 100%;
}
.slideshow_box .imgs_list li a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
}
.slideshow_box .imgs_list li a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 切换按钮 */
.slideshow_box .taggle_btn .left_taggle_btn,
.slideshow_box .taggle_btn .right_taggle_btn {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    text-align: center;
    color: rgba(134, 134, 134, 0.7);
    border: 0px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color .5s ease 0s;
    cursor: pointer;
}
.slideshow_box .taggle_btn .left_taggle_btn:hover,
.slideshow_box .taggle_btn .right_taggle_btn:hover {
    color: rgb(214, 214, 214);
    background-color: rgba(0, 0, 0, 0.6);
    transition: background-color .5s ease 0s;
}
.slideshow_box .taggle_btn .left_taggle_btn {
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
}
.slideshow_box .taggle_btn .right_taggle_btn {
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
}

/* 底部小圆点 */
.slideshow_box .circle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.slideshow_box .circle ul {
    margin: 0px;
    padding: 0px;
}
.slideshow_box .circle ul li {
    float: left;
    margin: 0px 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    list-style: none;
    cursor: pointer;
}
.slideshow_box .circle ul li:first-child {
    background-color: rgb(255, 238, 0);
}

</style>